<template>
  <div class="add">
    <!--搜索-->
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <!--轮播-->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="item in banner" :key="item.id">
       <img :src="item.url" style="width: 100%; height: 200px" />
      </van-swipe-item>
    </van-swipe>
    <!--列表-->
       <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
       <van-card
 v-for="item in list" :key="item.id"
   :price="item.price"
    tag="热卖中"
  desc="描述信息"
   :title="item.product"
    :thumb="item.picture"
  :origin-price="item.oldprice"
  @click="onDetail(item.id)"
/>


<!-- <div class="box"  >
  <div class="opp" v-for="item in list" :key="item.id">
<img :src="item.picture" alt="">
  </div>

</div> -->
      </van-list>
     
    </van-pull-refresh> 
  </div>
</template>

<script>

import { requestBannerList} from "@/api/banner.js";
import {requestProductList } from "@/api/product.js";
export default {
  name: 'HomeView',
  data(){
    return{
       banner:[],//轮播
        list: [],//商品列表
      loading: false,
      finished: false,
      refreshing: false,
        pageNo: 1, // 页号
       value: '',

    }
  },
 async created(){
   let res = await requestBannerList();
    let data = res.data;
    let { resultCode, resultInfo } = data;
    if (resultCode == 1) {
      this.banner = resultInfo.list;
    }
  
},
 methods: {
    // 当组件滚动到底部时，会触发 @load='onLoad' 事件
    async  onLoad() {
      //判断当前加载的数据，是否是下载刷新，如果refreshing为true表示下拉刷新状态
      if (this.refreshing) {
        this.list = []; // 重置list
        this.refreshing = false;
        this.pageNo = 1; //下拉刷新第一页数据
      }
      // 异步更新数据
      let res = await requestProductList(this.pageNo);
      let data = res.data;
    
      let { resultCode, resultInfo } = data;
      if (resultCode == 1) {
        // this.list=resultInfo.list
        this.list = [...this.list, ...resultInfo.list];
        this.loading = false;
        this.pageNo++;
      } else {
        // 数据全部加载完成
        this.finished = true;
      }
    },
    onRefresh() {
      this.finished = false; // true全部数据加载结束，刷新第一页数据，设置false表示后面还有加载数据
      this.loading = true; // true显示加载中,当你滚动到底时，可以看到加载中效果
      this.onLoad();
    },
    onDetail(id){
      this.$router.push({path:'/details' ,query:{id}})
    }
  },

}

</script>
<style>


  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    display: flex;
  }
  
 
</style>